<template>
  <div class="MineWrap">
    <header class="header">
      <!-- 登录后 -->
      <div v-if="userInfo.avatarUrl"
           class="card uni-flex">
        <div class="card_left">
          <!-- logo -->
          <img src="/static/imgIcon/live_e-asy_logo.png"
               alt=""
               class="LiveEasylogo">
          <div class="mineInfo">
            <!-- 个人头像 -->
            <u-avatar :src="userInfo.avatarUrl"
                      size="120"></u-avatar>
            <!-- 账户名称 -->
            <view class="master">{{userInfo.nickName}}</view>
            <!-- 手机号码 -->
            <view class="phoneNum">
              <span v-if="userInfo.mobile">{{userInfo.mobile}}</span>
              <button v-else
                      open-type="getPhoneNumber"
                      @getphonenumber="getPhoneNumber">获取手机</button>
            </view>
          </div>
        </div>
        <div class="card_rigth">
          <!-- 主账号 -->
          <view class="card_name">主账号|</view>
          <!-- 空 -->
          <view class="null"></view>
          <!-- 切换用户 -->
          <div class="me_info_ID uni-flex">
            <!-- 切换用户卡片 -->
            <view class="me_info_ID_card ">
              <img src="/static/imgIcon/the_point_logo_copy.png"
                   alt=""
                   class="tit_image">
              <view class="in_ID">转换账户</view>
            </view>
          </div>

          <!-- 所属小区 -->
          <view class="address uni-flex">
            <u-icon name="map"></u-icon>
            <!-- <view class="icon">标</view> -->
            <view class="house_address">{{userInfo.province}}{{userInfo.city}}</view>
          </view>
          <!-- 修改资料按钮 -->
          <view class="buttom_me">修改个人资料</view>
        </div>
      </div>
      <!-- 登录前 -->
      <div v-else
           class="login card">
        <button v-if="canIUse"
                @tap="handleGetUserInfo"
                class="loginBut">点击登录</button>
        <view v-else>请升级微信版本</view>
      </div>
    </header>
    <nav class="nav">
      <!-- 灰色分界线 -->
      <view class="border"></view>
      <!-- 列表 -->
      <u-cell-group>
        <u-cell-item icon="gift"
                     title="我的活动"
                     :arrow="true"
                     right-icon>
          <u-badge :absolute="false"
                   count="NEW"
                   slot="right-icon"></u-badge>
        </u-cell-item>
        <u-cell-item icon="order"
                     title="意见反馈"></u-cell-item>
      </u-cell-group>
    </nav>
  </div>
</template>

<script>	
import {
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'
export default {


  data () {
    return {
      loc: {},
      // login
      canIUse: uni.canIUse('button.open-type.getUserInfo'),
    }
  },
  onLoad () {
    this.wxLogin()
  },
  mounted () {

    // 定位
    console.log('this.$tools.getLocation', this.$tools.getLocation);
    this.$tools.getLocation().then(res => {
      this.loc = res
    })
  },
  computed: {
    ...mapGetters(['hasLogin', 'hasUserInfoLogin', 'userInfo'])
  },
  methods: {
    ...mapActions({ _setUserInfoAction: 'setUserInfoAction', _getPhoneNumber: 'getPhoneNumber', _getUserId: 'getUserId' }),
    ...mapMutations(['SETDATAILUSERINFO', 'SETPHONE', "LOGOUT"]),
    // 微信登录
    wxLogin () {
      // 有缓存
      console.log('this============', this.$tools);
      if (this.$getCache('userInfo')) {
        this.SETDATAILUSERINFO(this.$tools.getCache('userInfo'))
        return
      }
      if (this.$getCache('userInfo').openId) {
        this._getUserId()
      }
    },

    // 获取个人信息
    async handleGetUserInfo () {
      if (!this.$getCache('userInfo').user_id) {
        this._getUserId()
      }
      uni.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (getUserProfile) => {
          console.log('getUserProfile', getUserProfile);
          this._setUserInfoAction(getUserProfile.userInfo)
        },
        fail: err => {
          console.log('err==============>', err);
        }
      })
    },
    // 获取手机
    getPhoneNumber (e) {
      let phoneObj = {}
      phoneObj.iv = e.detail.iv
      console.log(e.detail.iv);
      phoneObj.user_id = this.userInfo.user_id
      phoneObj.encryptedData = e.detail.encryptedData
      this._getPhoneNumber(phoneObj).then(response => {
        uni.showToast({ title: response })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.MineWrap {
  width: 100%;
  height: 100%;
  // 头部--卡后面的背景
  .header {
    height: 500rpx;
    display: flex;
    padding: 20rpx;
    // todo 跟换图片链接
    // background-image: url("@/static/imgIcon/Shape_2_copy.png");
    background: linear-gradient(234deg, #00bbb9, #c3eb6f, #ccf86f);
    // 卡
    .card {
      width: 100%;
      height: 100%;
      border-radius: 25rpx;
      background: rgba($color: #fff, $alpha: 0.5);
      justify-content: space-between;
      padding: 50rpx;
      // 卡的左边
      .card_left {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        // logo
        .LiveEasylogo {
          width: 183rpx;
          height: 60rpx;
        }
        .mineInfo {
          height: 60%;
          margin: 36rpx 10rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          // 个人头像
          // .mineImage {
          //   width: 117rpx;
          //   height: 117rpx;
          // }
          // 账户名称
          .master {
            font-size: 28rpx;
            color: #3e3e3e;
          }

          // 手机号码
          .phoneNum {
            font-size: 18rpx;
            color: #3e3e3e;
          }
        }
      }
      // 卡的右边
      .card_rigth {
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // 主账户
        .card_name {
          font-size: 35rpx;
          letter-spacing: 4rpx;
          font-family: NotoSansCJKtc;
          color: #fefefe;
        }
        // 个人头像加text
        .me_info_ID {
          display: flex;
          justify-content: flex-end;
          .me_info_ID_card {
            margin-left: 23rpx;
            // 头像
            .tit_image {
              width: 71rpx;
              height: 71rpx;
            }
            // txet
            .in_ID {
              font-size: 18rpx;
              font-family: NotoSansCJKtc;
              color: #00393d;
            }
          }
        }

        // 小区地址
        .address {
          display: flex;
          justify-content: space-around;
          // 地址名字
          .house_address {
            font-size: 20rpx;
            color: #666666;
          }
        }
        // 修改个人信息buttom
        .buttom_me {
          height: 42rpx;
          background: #3ab49d;
          border-radius: 20rpx;
          font-size: 21rpx;
          font-family: NotoSansCJKtc;
          color: #ffffff;
          text-align: center;
          line-height: 42rpx;
        }
      }
    }
    .login {
      width: 100%;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      .loginBut {
        width: 400rpx;
        background: #3ab49d;
        border-radius: 50rpx;
        color: #fff;
        margin: 0 auto;
      }
    }
  }
  .nav {
    //分界线
    .border {
      height: 11rpx;
      background: rgba(159, 172, 179, 0.2);
    }
  }
}
</style>